<template>
	<el-form :model="formData" ref="formRef" :rules="formRules" label-width="8rem">
		<el-row type="flex" :gutter="10">
			<!-- <el-col :span="24">
				<el-form-item label="首页轮播图(750*500)" prop="img">
					<el-upload-image v-model="formData.img" :limit="8" :title="title"></el-upload-image>
				</el-form-item>
			</el-col> -->
			<div v-for="(item, index) in time" :key="index" style="width: 100%">
				<el-col :span="12">
					<el-form-item label="排课时间" required>
						<el-date-picker v-model="item.date" type="datetimerange" :disabled="isdisabled && item.date" value-format="timestamp" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"> </el-date-picker>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="固定开课时间" required>
						<div style="display: flex; align-items: center">
							<div style="width: 450px; margin-right: 5px">
								<el-select v-model="item.week" :disabled="isdisabled && item.week==''" size="mini" style="width: 400px" placeholder="请选择类型">
									<el-option v-for="(sitem, sindex) in weeklist" :key="sitem.id" :label="sitem.title" :value="sitem.id"> </el-option>
								</el-select>
							</div>
							<el-button type="primary" :disabled="isdisabled" @click="addtime(item, index)" v-if="index == time.length - 1" circle size="mini" icon="el-icon-plus"></el-button>
							<el-button type="primary" :disabled="isdisabled" @click="splicetime(item, index)" v-else circle size="mini" icon="el-icon-minus"></el-button>
						</div>
					</el-form-item>
				</el-col>
			</div>
			<!-- <el-col :span="24" v-for="(item,index) in time" :key="index" >
				<div style="display: flex;width: 100%; ">
					<el-form-item label="排课时间" >
						<div  style="display: flex;align-items: center;">
									<el-date-picker
									v-model="item.date"
									type="datetimerange"
									:disabled="isdisabled"
									value-format="timestamp"
									range-separator="至"
									start-placeholder="开始日期"
									end-placeholder="结束日期">
									</el-date-picker>
						</div>
					</el-form-item>
					<el-form-item label="固定开课时间" >
						<div  style="display: flex;align-items: center;" >
							<div style="width:450px;margin-right: 5px;">
								<el-select v-model="item.week" :disabled="isdisabled" size="mini" style="width: 400px;"  placeholder="请选择类型"
									>
									<el-option v-for="(sitem,sindex) in weeklist" :key="sitem.id" :label="sitem.title" :value="sitem.id">
									</el-option>
								</el-select>
							</div>
							<el-button type="primary" :disabled="isdisabled" @click="addtime(item,index)" v-if="index==(time.length-1)" circle size="mini" icon="el-icon-plus"></el-button>
							<el-button type="primary" :disabled="isdisabled" @click="splicetime(item,index)" v-else circle size="mini" icon="el-icon-minus"></el-button>
						</div>
					</el-form-item>
				</div>
			</el-col> -->
			<el-col :span="12">
				<el-form-item label="课程" prop="course_id">
					<el-select v-model="formData.course_id" :disabled="isdisabled" size="mini" placeholder="请选择类型">
						<el-option v-for="item in courselist" :key="item.id" :label="item.name" :value="item.id"> </el-option>
					</el-select>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="社区" prop="community_id">
					<el-select v-model="formData.community_id" size="mini" placeholder="请选择社区">
						<el-option v-for="item in communitylist" :key="item.id" :label="item.name" :value="item.id"> </el-option>
					</el-select>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<!-- 是否推荐课程1是2否  -->
				<el-form-item label="是否推荐课程" prop="is_tj">
					<el-radio-group v-model="formData.is_tj">
						<el-radio :label="1">是</el-radio>
						<el-radio :label="2">否</el-radio>
					</el-radio-group>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<!-- 是否精选课程1是2否  -->
				<el-form-item label="是否精选课程" prop="is_jx">
					<el-radio-group v-model="formData.is_jx">
						<el-radio :label="1">是</el-radio>
						<el-radio :label="2">否</el-radio>
					</el-radio-group>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="老师" prop="teacher_id">
					<el-select v-model="formData.teacher_id" size="mini" placeholder="请选择类型">
						<el-option v-for="item in teacherlist" :key="item.id" :label="item.name" :value="item.id"> </el-option>
					</el-select>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="最低报名人数" prop="mix">
					<el-input v-model="formData.mix" clearable type="number" placeholder="请输入最低报名人数"></el-input>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="最高报名人数" prop="max">
					<el-input v-model="formData.max" clearable type="number" placeholder="请输入最高报名人数"></el-input>
				</el-form-item>
			</el-col>
			<el-col :span="12" v-if="formData.age">
				<el-form-item label="年龄段" prop="age">
					<el-select v-model="formData.age" size="mini" placeholder="请选择年龄段" :disabled="isdisabled">
						<el-option v-for="item in agelist" :key="item.id" :label="item.start_year + '-' + item.end_year" :value="item.id"> </el-option>
					</el-select>
					<!-- <el-input v-model="formData.age" clearable  type="number" placeholder="请输入年龄段"></el-input> -->
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="报名结束时间" prop="sign_end_time">
					<el-date-picker type="datetime" placeholder="报名结束时间不可大于最早开课时间" format="yyyy-MM-dd HH:mm:ss" value-format="timestamp" :disabled="isdisabled" v-model="formData.sign_end_time"></el-date-picker>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="所在楼层教室" prop="detail_address">
					<el-input v-model="formData.detail_address" clearable :disabled="isdisabled" placeholder="请输入所在楼层教室"></el-input>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="上架状态" prop="use_status">
					<el-radio-group v-model="formData.use_status" >
						<el-radio :label="1">上架</el-radio>
						<el-radio :label="2">下架 </el-radio>
					</el-radio-group>
				</el-form-item>
			</el-col>
			<el-col :span="24">
				<el-form-item label="地图">
					<maps :location.sync="formData.location" :isdisabled="isdisabled"></maps>
				</el-form-item>
			</el-col>

			<!-- <el-col :span="12">
				<el-form-item label="详情" prop="content">
					<el-input v-model="formData.content" type="textarea" placeholder="请输入详情"></el-input>
				</el-form-item>
			</el-col> -->
			<!-- <el-col :span="24">
			    <el-form-item prop="content" label-width="0px">
			        <div style="border: 1px solid #ccc;">
			            <Toolbar
			                style="border-bottom: 1px solid #ccc"
			                :editor="editor"
			                :defaultConfig="toolbarConfig"
			                :mode="mode"
			            />
			            <Editor
			                style="height: 500px; overflow-y: auto;"
			                v-model="formData.content"
			                :defaultConfig="editorConfig"
			                :mode="mode"
			                @onCreated="onCreated"
			            />
			        </div>
			    </el-form-item>
			</el-col> -->
		</el-row>
		<el-row type="flex" justify="center">
			<el-button type="primary" icon="el-icon-check" @click="onConfirm">确认</el-button>
			<el-button type="default" icon="el-icon-close" @click="onCancel">取消</el-button>
		</el-row>
	</el-form>
</template>

<script>
import { Editor, Toolbar } from "@wangeditor/editor-for-vue"
import { imghttp, get, post, del } from "@/assets/js/http"
export default {
	name: "member-search",
	props: {
		formData: {
			type: Object,
			default: () => {},
		},
		isdisabled: {
			type: Boolean,
			default: false,
		},
		time: {
			type: Array,
			default: [{}],
		},
	},
	components: {
		"el-upload-image": () => import("@/components/el-upload-image.vue"),
		maps: () => import("@/components/map/index.vue"),
		Editor,
		Toolbar,
	},
	mounted() {
		// console.log(this.formData.times)
		// this.location = {lat:this.formData.latitude,lng:this.formData.longitude}
		this.getcommunity()
		this.getcourse()
		this.getteacher()
		this.getageList()
	},
	data() {
		return {
			// time:[{}],
			location: {},
			editor: null,
			toolbarConfig: {},
			editorConfig: {
				MENU_CONF: {
					uploadImage: {
						fieldName: "file",
						server: "/admin/ajax/upload",
						headers: {
							batoken: this.$store.state.token,
						},
						/* eslint-disable-next-line */
						customInsert(res, insertFn) {
							insertFn($store.getters.baseUrl + res.data.file.url)
						},
					},
					uploadVideo: {
						fieldName: "file",
						server: "/admin/ajax/upload",
						headers: {
							batoken: this.$store.state.token,
						},
						/* eslint-disable-next-line */
						customInsert(res, insertFn) {
							insertFn($store.getters.baseUrl + res.data.file.url)
						},
					},
				},
			},
			mode: "default",
			formRules: {
				// img: [{
				// 	required: true,
				// 	message: '请上传',
				// 	trigger: 'change'
				// }],
				course_id: [{ required: true, message: "请选择", trigger: "change" }],
				community_id: [{ required: true, message: "请选择", trigger: "change" }],
				teacher_id: [{ required: true, message: "请选择", trigger: "change" }],
				mix: [{ required: true, message: "请输入", trigger: "change" }],
				max: [{ required: true, message: "请输入", trigger: "change" }],
				sign_end_time: [{ required: true, message: "请选择", trigger: "change" }],
				// location: [{required: true,message: '请输入',trigger: 'change'}],
				is_tj: [{ required: true, message: "请选择", trigger: "change" }],
				is_jx: [{ required: true, message: "请选择", trigger: "change" }],
				detail_address: [{ required: true, message: "请输入", trigger: "change" }],
				use_status: [{ required: true, message: "请选择", trigger: "change" }],
				week: [{ required: true, message: "请选择", trigger: "change" }],
				date: [{ required: true, message: "请选择", trigger: "change" }],
			},
			title: "请上传1.5:1比例的图片",
			newtime: [],
			communitylist: [], //社区列表
			courselist: [], //课程列表
			teacherlist: [], //老师列表
			weeklist: [
				{ id: 1, title: "周一" },
				{ id: 2, title: "周二" },
				{ id: 3, title: "周三" },
				{ id: 4, title: "周四" },
				{ id: 5, title: "周五" },
				{ id: 6, title: "周六" },
				{ id: 0, title: "周日" },
			],
			agelist: [], //年龄段
		}
	},
	beforeDestroy() {
		const editor = this.editor
		if (editor == null) return
		editor.destroy()
	},
	methods: {
		getTimeFormat(timeS) {
			//2022-02-02 02:22:22  2023-06-28 18:06:00
			let time = new Date(timeS).getTime() / 1000 //除1000 是变成秒级的时间戳 不除就是毫秒级
			return time
		},
		addtime(item, index) {
			this.newtime = []
			console.log(item, "item")
			this.time.push({ date: "", week: "" })
			// this.time.push({date:item.date,time:item.time})
		},
		splicetime(item, index) {
			this.newtime = []
			const c = this.time.findIndex((sitem) => sitem == item)
			this.time.splice(c, 1)
		},
		onCreated(editor) {
			this.editor = Object.seal(editor)
		},
		onConfirm() {
			if (!this.time[0]) {
				this.$message("请选择排课时间")
				return
			}
			if (!this.formData.location.lat) {
				this.$message("请选择地址")
				return
			}
			let formData = JSON.parse(JSON.stringify(this.formData))
			// return
			this.$refs.formRef.validate(async (valid) => {
				try {
					if (valid) {
						formData.sign_end_time = formData.sign_end_time / 1000
						this.newtime = []
						this.time.forEach((item) => {
							if (!item.date) {
								this.$message.error('请填写时间排课时间及固定开课时间')
								throw false
							} else {
								this.newtime.push({ start_day: item.date[0] / 1000, end_day: item.date[1] / 1000, week: item.week==7?0:item.week })
							}
						})
						formData.latitude = formData.location.lat
						formData.longitude = formData.location.lng
						formData.time = this.newtime //this.newtime
					} else {
						console.log("error submit!!")
						return false
					}
					const info = JSON.parse(JSON.stringify(formData))
					this.$loading()
					if (info.id) {
						await post({
							url: "/admin/project.TeacherCourse/edit",
							data: info,
							successTip: true,
						})
					} else {
						await post({
							url: "/admin/project.TeacherCourse/add",
							data: info,
							successTip: true,
						})
					}
					this.$emit("search")
					this.$emit("update:visible", false)
					this.$refs.formRef.resetFields()
				} catch (err) {
				} finally {
					this.$loading().close()
				}
			})
		},
		onCancel() {
			this.$parent.$emit("update:visible", false)
			this.$refs.formRef.resetFields()
		},
		//获取社区列表
		getcommunity() {
			post({
				url: "/admin/project.Community/index",
				data: {
					limit: 9999,
					status: 1, //0待审核1通过2拒绝
				},
			}).then((res) => {
				this.communitylist = res.list
			})
		},
		//获取课程列表
		getcourse() {
			post({
				url: "/admin/project.Course/index",
				data: {
					limit: 9999,
				},
			}).then((res) => {
				this.courselist = res.list
			})
		},
		//获取老师列表
		getteacher() {
			post({
				url: "/admin/project.Teacher/index",
				data: {
					limit: 9999,
				},
			}).then((res) => {
				this.teacherlist = res.list
			})
		},
		async getageList() {
			// this.$loading()
			// let { list,total } =
			await get({
				url: "/admin/project.Course/year",
				params: {
					limit: 9999,
					// ...this.searchParam,
					// ...{
					// 	server_type: this.$route.query.type ? 2 : 1,
					// 	// type:2,//1专业2标签
					// 	// search_time:this.searchParam.search_time.length?this.searchParam.search_time.join(' - '):''
					// }
				},
			}).then((res) => {
				this.agelist = res.list
				// this.searchParam.total = res.total
				// this.importindex = []
				// this.$loading().close()
			})
		},
	},
}
</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>
<style lang="scss" scoped></style>
